<style lang="scss" scope>
@import "./orderList.css";
</style>
<template>
  <div class="order-wrapper">
    <TitleBar title="订单列表" refresh />
    <!-- 筛选start -->
    <Panel header="筛选查询" style="margin-bottom: 84px;">
      <template>
        <el-form :inline="true" :model="getOrderListData" class="order-screen-form">
          <el-form-item label="输入搜索：">
            <el-input v-model="getOrderListData.orderCode" placeholder="订单编号" />
          </el-form-item>
          <el-form-item label="用户账号:">
            <el-input v-model="getOrderListData.customer" placeholder="用户账号" />
          </el-form-item>
          <el-form-item label="提交时间：">
            <el-date-picker
              v-model="getOrderListData.dateTime"
              type="date"
              placeholder="请选择时间"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item class="screenBtn">
            <el-button type="primary" @click="orderSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
    </Panel>
    <!-- 筛选end -->
    <!-- 列表start -->
    <Panel header="数据列表">
      <template>
        <div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="orderCode" label="订单编号" align="center" />
            <el-table-column prop="createTime" align="center" label="提交时间" />
            <el-table-column prop="userCount" align="center" label="用户账号" />
            <el-table-column prop="totalPrice" align="center" label="订单金额" />
            <el-table-column prop="payType" align="center" label="支付方式">
              <template scope="scope">
                <div>{{ payConvert(scope.row.payType) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="orderState" align="center" label="订单状态">
              <template scope="scope">
                <div>{{ orderStatusConvert(scope.row.orderState) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="operation" align="center" label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="getOrderDetails(scope.row.orderCode)"
                >查看详情</el-button>
                <el-button
                  v-if="isShowDeleteButton(scope.row.orderState)"
                  type="text"
                  size="small"
                  @click="deleteOrder(scope.row.orderCode)"
                >删除订单</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页内容-->
          <pagination :pagination="pagination1" @changepage="getOrderByStatus1" />
        </div>
      </template>
    </Panel>
    <!-- 列表end -->
  </div>
</template>
<script>
import Panel from '@/components/Panel/Panel'
import { getOrderByStatus, getOrderDetails, deleteOrder } from '@/api/order'
export default {
  inject: ['reload'],
  components: {
    Panel
  },
  data() {
    return {
      getOrderListData: {
        orderCode: '',
        customer: '',
        dateTime: ''
      },
      tableData: [],
      pagination1: {}
    }
  },
  created() {
    this.getOrderByStatus1()
  },
  methods: {
    isReload() {
      this.reload()
    },
    // 订单列表
    getOrderByStatus1(pageNum = 1) {
      getOrderByStatus({
        orderCode: this.getOrderListData.orderCode,
        customer: this.getOrderListData.customer,
        dateTime: this.getOrderListData.dateTime,
        pageNum,
        pageSize: 5
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.tableData = res.data.list.filter(item => {
            return item.totalPrice = item.totalPrice/100
          })
        }
        this.pagination1 = res.data
      })
    },
    // 查看订单详情
    getOrderDetails(orderCode) {
      this.$router.push({
        path: 'orderDetails',
        query: {
          orderCode
        }
      })
      // getOrderDetails({ orderCode }).then(res => {
      //   if (res.code == 200) {
      //     this.$router.push({
      //       path: 'orderDetails',
      //       params: {
      //         id: orderCode
      //       }
      //     })
      // sessionStorage.setItem('orderDetails', JSON.stringify(res.data))
      // } else if (res == 500) {
      //   alert(res.message)
      // }
      // })
    },
    // 删除订单
    deleteOrder(orderCode) {
      this.$confirm('此操作将删除该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        distinguishCancelAndClose: false
      })
        .then(() => {
          const codes = [orderCode]
          deleteOrder(codes).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.isReload()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 订单搜索
    orderSearch() {
      this.getOrderByStatus1()
    },
    // 是否显示删除订单按钮
    isShowDeleteButton(i) {
      if (i == 7 || i == 8 || i == 9) {
        return true
      } else return false
    },
    // 支付方式转换
    // 支付类型，微信-wx，支付宝-zfb，银行卡-cd，余额-ye，金币-jb',
    payConvert(i) {
      if (i === 'wx') {
        return '微信'
      } else if (i === 'zfb') {
        return '支付宝'
      } else if (i === 'cd') {
        return '银行卡'
      } else if (i === 'ye') {
        return '余额'
      } else if (i === 'jb') {
        return '金币'
      }
    },
    // 订单状态转换
    // 订单状态(1 已下单待支付 , 2 已支付待发货 , 3 已发货 4 待签收 5 已完成 6支付异常 7用户取消关闭订单，8支付超时关闭订单，9后台手动关闭订单)',
    orderStatusConvert(i) {
      if (i === 1) {
        return '已下单待支付'
      } else if (i === 2) {
        return '已支付待发货'
      } else if (i === 3) {
        return '已发货'
      } else if (i === 4) {
        return '待签收'
      } else if (i === 5) {
        return '已完成'
      } else if (i === 6) {
        return '支付异常'
      } else if (i === 7) {
        return '用户取消关闭订单'
      } else if (i === 8) {
        return '支付超时关闭订单'
      } else if (i === 9) {
        return '后台手动关闭订单'
      }
    }
  }
}
</script>
